<template>
    <div>
        <Header :title="t('home.Mine.history')">
            <template #left>
                <van-icon name="arrow-left" color="#fff" size="25px" class="icon-left" @click="goBack()" />
            </template>
        </Header>
        <main>
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                <van-list class="vanlist" @load="onload" :scroller="scroll" ref="vanlist" v-model:loading="loading"
                    :finished="finished" finished-text="没有更多了">
                    <van-cell v-for="(item, index) in list" :key="item.id">
                        <div class="item">
                            <div class="items">
                                <span>{{ t('history.mc') }}</span>
                                <span>{{ item.pairsName }}</span>
                            </div>
                            <div class="items">
                                <span>{{ t('history.ksjg') }}</span>
                                <span>{{ item.startAmount }}</span>
                            </div>
                            <div class="items" v-if="item.settleStatus == 1">
                                <span>{{ t('history.jsjg') }}</span>
                                <span>{{ item.finishAmount }}</span>
                            </div>
                            <div class="items">
                                <span>{{ t('history.xzje') }}</span>
                                <span>{{ item.amount }}</span>
                            </div>
                            <div class="items">
                                <span>{{ t('history.mrzt') }}</span>
                                <span>
                                    <van-tag :type="item.buyStatus === 1 ? 'primary' : 'danger'">
                                        {{ item.buyStatus === 1 ? t('history.zhang') : t('history.die') }}
                                    </van-tag>
                                </span>
                            </div>
                            <div class="items" v-if="item.isWin !== 0">
                                <span>{{ t('history.sfsy') }}</span>
                                <span>
                                    <van-tag :type="item.isWin === 1 ? 'primary' : 'danger'">
                                        {{ item.isWin === 1 ? t('history.yin') : t('history.shu') }}
                                    </van-tag>

                                </span>
                            </div>
                            <div class="items">
                                <span>{{ t('history.gmsj') }}</span>
                                <span>{{ update(item.createTime) }}</span>
                            </div>
                            <div class="items">
                                <span>{{ t('history.jgsj') }}</span>
                                <span>{{ item.secondsConfig.seconds }}{{ item.secondsConfig.secondsTime }}</span>
                            </div>
                            <div v-if="item.isWin !== 0" class="items">
                                <span>{{ t('history.ykje') }}</span>
                                <span :class="item.isWin === 1 ? 'fbcolor1' : 'fbcolor2'">
                                    {{ item.isWin === 1 ? '+' : '-' }}{{ item.profit }}
                                </span>
                            </div>
                            <!-- <div class="items">
                                <span></span>
                                <span>
                                    <van-tag type="warning" @click="handleRecord(item.id)">
                                        {{ $t('history.ckxq') }}
                                    </van-tag>
                                </span>
                            </div> -->

                        </div>
                    </van-cell>
                </van-list>
            </van-pull-refresh>
        </main>
    </div>
</template>

<script setup>
import Header from "@/components/Header/index.vue";
import useLanguage from '@/hooks/useLanguage';
import { useRouter } from 'vue-router'
import { userApi } from '@/api'
import { ref, onMounted, reactive } from 'vue'
const router = useRouter()
const { t } = useLanguage()
function goBack() {
    router.go(-1)
}
const scroll = ref()
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const postData = reactive({
    pageNum: 0,
    pageSize: 10
})

async function getTradeList() {
    const { code, data } = await userApi.getTradeList(postData)
    if (code == 20000) {
        if (refreshing.value) {
            list.value = []
            refreshing.value = false
        }
        console.log(data);
        if (data && data.records && data.records.length && data.records.length > 0) {
            data.records.map(item => list.value.push(item))
        }
        loading.value = false

        if (data.records.length < postData.pageSize) {
            finished.value = true
        }
    }
}
function onload() {
    postData.pageNum++
    getTradeList()
}
function onRefresh() {
    finished.value = false
    loading.value = true
    Object.assign(postData, {
        pageNum: 1,
        pageSize: 10
    })
    getTradeList()
}

const update = (date) => {
    const time = new Date(date).getTime()
    const second = new Date(date).getSeconds()
    const minute = new Date(date).getMinutes()
    const hour = new Date(date).getHours()
    const curdate = new Date(date).getDate()
    const mounth = new Date(date).getMonth() + 1
    const year = new Date(date).getFullYear()
    const newDate = `${year} ${mounth < 10 ? '0' + mounth : mounth}-${curdate < 10 ? '0' + curdate : curdate} ${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`
    return newDate
}
const vanlist = ref()
onMounted(() => {
    console.log(vanlist.value,);
})
</script>

<style lang="less" scoped>
.icon-left {
    margin-left: 10px;
}

main {
    padding-top: 10px;

}

.vanlist {
    height: 844px;
    width: 390px;
    overflow-y: auto;
}

.item {
    overflow: hidden;
    background-color: #FFFFFF;
    box-sizing: border-box;
    padding: 11px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: solid 1px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .items {
        margin-top: 5px;

        font-size: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
    }
}
</style>